{extend name="public:base"}
{block name='css'}
{/block}

{block name='body'}
<div class="view view-main white-navbar white-page white-toolbar">
    <div data-name="home" class="page">

        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"><a href="{$my_prev_url|default='/'}" class="external"><i class="iconfont icon-fanhui"></i></a></div>
                <div class="center"><span>商品分类</span></div>
                <div class="right"></div>
            </div>
        </div>

        <div class="page-content">
            <div class="class-kj">

                <div class="serach">
                    <form name="form" action="" id="form" method="post" >
                        <div class="m">
                            <div class="ico"></div>
                            <div class="key"><input type="text" name="keywords" placeholder="请输入关键字搜索" /></div>
                        </div>
                        <div class="sub"><input type="submit" value="搜索" /></div>
                    </form>
                </div>

                <div class="class-m">
                    <div class="class-l">
                        <ul>
                            {foreach name="list" item="li" key='key'}
                            <li classid="{$li.id}">{$li.title}</li>
                            {/foreach}
                        </ul>
                    </div>
                    <div class="class-r">
                        {foreach name="list" item="li" key='key'}
                        <ul class="js-sons js-sons-{$li.id}" style="display: none;">
                            {notempty name="li.list"}
                            {foreach name="li.list" item="ll"}
                            <li>
                                <a class="external" href="{:url('index/goods_list', ['cate_id'=>$ll['id']])}">
                                    <img src="{$ll.img}" alt="">
                                    <span>{$ll.title}</span>
                                </a>
                            </li>
                            {/foreach}
                            {/notempty}
                        </ul>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>


        {include file='public:tab' /}
    </div>
</div>
{/block}

{block name="js"}
<script type="text/javascript">
    $(function(){
        $('.class-l ul li').click(function(){
            $('.class-l ul li').removeClass('on');
            $('.js-sons').hide();
            $(this).addClass('on');
            $('.js-sons-'+$(this).attr('classid')).show();
        });
        $('.class-l ul li').eq(0).click();
    });

    var ajaxOn = false ;
    $().ready(function () {
        $("#form").validate({
            rules: {
                keywords: "required"
            },
            messages: {
                keywords: '请输入关键字'
            },
            showErrors: function (errorMap, errorList) {
                $.each(errorList, function (i, v) {
                    messageToast( v.message );
                    return false;
                });
            },
            onfocusout: false,
            onsubmit : true ,
            onkeyup : false ,
            onclick : false ,
            focusInvalid:false,
            submitHandler:function(){
                if (ajaxOn) {
                    return false ;
                }
                ajaxOn = true ;
                var keywords = $('input[name=keywords]').val();
                window.location.href = "{:url('index/search_goods')}?keywords="+keywords;
                return false ;
            }
        });
    });
</script>

{/block}